<template>
	<!-- 复用性弹窗组件 -->
	<view class="popup" v-if="show">
		<view class="content">
			<!-- 标题 -->
			<view class="title">{{ formlist.title || "提示弹窗" }}</view>
			<!-- 提示类型的弹窗时!!! -->
			<view class="tips" v-if="formlist.tips">{{formlist.tips}}</view>
			<view class="input" v-if="formlist.lists.length>0">
				<view class="line" v-for="(item,i) in formlist.lists" :key="item.val">
					<text>{{item.name}}:</text>
					<input type="text" value="" :type="item.type || 'text'" v-model="model[item.val]" />
				</view>
			</view>
			<!-- 时间按钮 -->
			<view class="btns">
				<view @tap="outline">取消</view>
				<view @tap="save">确认</view>
			</view>
			
		</view>
		
		<!-- 使用方法 -->
		<!-- <popup :show.sync="show" :formlist="formlist" @saveline="save"></popup>
		formlist:{
			title:"复用性提醒弹窗",
			tips:"复用性提醒弹窗复用性提醒弹窗复用性提醒弹窗复用性提醒弹窗复用性提醒弹窗",
			lists:[
				{ name:"姓名",val:"name"},
				{ name:"密码",val:"pass",type:"password"}
			]
		} -->
	</view>
</template>

<script>
	export default{
		props:{
			show: Boolean,
			formlist: Object
		},
		data(){
			return{
				model:{}, // 存放
			}
		},
		methods:{
			outline(){
				// 关闭事件
				this.$emit("update:show",false)
			},
			save(){
				// 提交事件
				this.$emit("saveline",this.model)
				this.outline()
			}
		},
		created() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.popup{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,.3);
		z-index: 10;
		.content{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			width: 600rpx;
			height: auto;
			padding: 30rpx;
			border-radius: 15rpx;
			background: white;
			box-sizing: border-box;
			border: 1rpx solid #007AFF;
			z-index: 11;
			.title{
				width: 100%;
				padding: 20rpx 0rpx;
				font-size: 27rpx;
			}
			.tips{
				font-size: 26rpx;
				color: #999999;
				padding-bottom: 20rpx;
				text-indent: 52rpx;
			}
			.btns{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 100%;
				view{
					display: block;
					padding: 15rpx 35rpx;
					border-radius: 15rpx;
					font-size: 26rpx;
					margin-left: 15rpx;
					border: 1rpx solid #007AFF;
				}
			}
			.input{
				width: 100%;
				padding-bottom: 20rpx;
				.line{
					width: 100%;
					display: flex;
					align-items: center;
					padding: 8rpx 0rpx;
					text{
						font-size: 26rpx;
						padding-right: 15rpx;
					}
					input{
						flex:1;
						border: 1rpx solid #ccc;
						border-radius: 10rpx;
						padding: 15rpx;
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>
